<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="我接收的任务" name="first">
        <el-table style="width: 100%" :data="tableData" @row-click="goToDetail">
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="name" label="任务名称" align="center"></el-table-column>
          <el-table-column prop="projectName" label="所属项目" align="center"></el-table-column>
          <el-table-column label="任务进度" align="center">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.taskProgress" v-if="scope.row.taskStatus == 5" status="success"></el-progress>
              <el-progress :percentage="scope.row.taskProgress" v-else-if="scope.row.taskStatus == 6" status="warning"></el-progress>
              <el-progress :percentage="scope.row.taskProgress" v-else-if="scope.row.taskStatus == 4" status="exception"></el-progress>
              <el-progress :percentage="scope.row.taskProgress" v-else ></el-progress>
            </template>
          </el-table-column>
          <el-table-column prop="planStartDate" label="开始时间" align="center"></el-table-column>
          <el-table-column prop="planEndDate" label="完成时间" align="center"></el-table-column>
          <el-table-column prop="statusText" label="状态" align="center"></el-table-column>
          <!-- <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope"> -->
              <!-- <el-button size="mini" type="success" v-if="!(scope.row.taskStatus == 5 || scope.row.taskStatus == 6 || scope.row.taskStatus == 7)" @click.stop="fill(scope.row)">填写进度</!--> -->
              <!-- <el-button size="mini" type="warning" v-if="scope.row.taskProgress == '100%' && !(scope.row.taskStatus == 6 || scope.row.taskStatus == 7)" @click="submitApprove(scope.row)">提交审核</el-button> -->
            <!-- </template>
          </el-table-column> -->
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="size"
          :total="total"
          @current-change="pageChange"
          class="pagination"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="我分配的任务" name="second">
        <el-table style="width: 100%" :data="alloterTableData" @row-click="goToDetail">
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="name" label="任务名称" align="center"></el-table-column>
          <el-table-column prop="projectName" label="所属项目" align="center"></el-table-column>
          <el-table-column label="任务进度" align="center">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.taskProgress" v-if="scope.row.taskStatus == 5" status="success"></el-progress>
              <el-progress :percentage="scope.row.taskProgress" v-else-if="scope.row.taskStatus == 6" status="warning"></el-progress>
              <el-progress :percentage="scope.row.taskProgress" v-else-if="scope.row.taskStatus == 4" status="exception"></el-progress>
              <el-progress :percentage="scope.row.taskProgress" v-else ></el-progress>
            </template>
          </el-table-column>
          <el-table-column prop="planStartDate" label="开始时间" align="center"></el-table-column>
          <el-table-column prop="planEndDate" label="完成时间" align="center"></el-table-column>
          <el-table-column prop="statusText" label="状态" align="center"></el-table-column>
          <el-table-column prop="user" label="负责人" align="center"></el-table-column>
          <!-- <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-button size="mini" type="success" v-if="scope.row.taskStatus == 6">审核</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="size"
          :total="total"
          @current-change="pageChange"
          class="pagination"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="进度填写" :visible.sync="scheduleFormVisable" center>
      <el-form :model="scheduleForm">
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker v-model="scheduleForm.date" type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="完成进度" :label-width="formLabelWidth">
          <el-input v-model="scheduleForm.percent" autocomplete="off" class="percent" style="width:100%" @keyup.native="number">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="工作描述" :label-width="formLabelWidth">
          <el-input v-model="scheduleForm.remark" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="scheduleFormVisable = false">取 消</el-button>
        <el-button type="primary" @click="scheduleCommit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      alloterTableData: [],
      alloterCurrent: 1,
      alloterSize: 10,
      alloterTotal: 0,
      scheduleFormVisable: false,
      scheduleForm: {
        date: '',
        percent: '',
        remark: ''
      },
      formLabelWidth: "80px",
      id: '',
      projectId: ''
    };
  },
  methods: {
    goToDetail(row) {
      this.$router.push({ path: "task/taskDetail", query: { id: row.id, taskType: row.taskType } });
    },
    getAlloter() {
      let params = {
        size: this.size,
        current: this.current
      };
      this.$store.dispatch("task/getAlloter", params).then(res => {
        this.alloterTotal = res.total * 1;
        this.alloterTableData = res.records.map(item => {
          item.taskProgress = Number((item.taskProgress * 100).toFixed(0));
          item.statusText = $status.taskStatus[item.taskStatus];
          item.user = item.users.map(item => {
            return item.userName
          }).join(',');
          return item;
        });
      });
    },
    getManager() {
      let params = {
        size: this.size,
        current: this.current
      };
      this.$store.dispatch("task/getManager", params).then(res => {
        this.total = res.total * 1;
        this.tableData = res.records.map(item => {
          item.taskProgress = Number((item.taskProgress * 100).toFixed(0));
          item.statusText = $status.taskStatus[item.taskStatus];
          return item;
        });
      });
    },
    pageChange(current) {
      this.current = current * 1;
      this.getManager();
    },
    alloterPageChange(current) {
      this.alloterCurrent = current * 1;
      this.getAlloter();
    },
    scheduleCommit() {
      if(!this.scheduleForm.date) {
        return this.$alert('请选择时间');
      }
      if(!this.scheduleForm.percent) {
        return this.$alert('请填写进度');
      }
      if(this.scheduleForm.percent > 100) {
        return this.$alert('进度不能超过100');
      }
      let params = {
        taskId: this.id,
        projectId: this.projectId,
        progress: this.scheduleForm.percent/100,
        workDescribe: this.scheduleForm.remark
      }
      this.$store.dispatch('task/progressCommit', params).then(res => {
        this.showSuccessMessage('填写进度成功');
        this.getAlloter();
        this.getManager();
        this.scheduleForm = {
          date: '',
          percent: '',
          remark: ''
        }
        this.scheduleFormVisable = false;
      })
    },
    fill(row) {
      this.scheduleFormVisable = true;
      this.id = row.id;
      this.projectId = row.projectId
    },
    submitApprove() {
      this.taskVisable = true;
    },
    number(){　　
      this.scheduleForm.percent=this.scheduleForm.percent.replace(/[^\.\d]/g,'');
      this.scheduleForm.percent=this.scheduleForm.percent.replace('.','');
　　}
  },
  mounted() {
    this.getAlloter();
    this.getManager();
  }
};
</script>
<style lang="less" scoped>
.pagination {
  margin-top: 20px;
}
</style>